<template>
    <div class="swiper-container" ref="swiperContainer">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in 2">
                <van-grid clickable column-num="5" icon-size="50">
                    <van-grid-item
                            v-for="(item,index) in 10"
                            :key="index"
                            :icon="'https://bing.ioliu.cn/v1/rand?w=60&h=60&time='+Math.random()*999"
                    />
                </van-grid>
            </div>
        </div>
        <div class="swiper-scrollbar"></div>
    </div>
</template>

<script>
    export default {
        name: "Category",
        mounted() {

            const mySwiper = new Swiper(this.$refs.swiperContainer, {
                freeMode:true,
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
            mySwiper.scrollbar.$el.css('width','100px');
            mySwiper.scrollbar.$dragEl.css('background','#ff6600');
            mySwiper.scrollbar.updateSize();

        }
    }
</script>

<style scoped>
    .swiper-scrollbar{
        left: calc( 50% - 100px );
    }

</style>